<template>
  <div>
      <!-- picture-card -->
    <el-upload action="#" :accept="accept" :list-type="listType" :file-list="fileList" :auto-upload="false"  :on-remove="handleRemove" :on-change="beforeUpload">
      <i slot="default" v-if="listType === 'picture-card'" class="el-icon-plus"></i>
      <el-button type="primary" slot="default" v-else class="el-icon-upload"></el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  props: {
      list: {
          type: Array,
          default: () => []
      },
      listType: {
          type: String,
          default: 'picture-card'
      },
      accept: String
  },
  data() {
    return {
      fileList: [],
      removeList: [],
      addList: []
    };
  },
  created() {
      this.fileList = this.list.map(el => {
          return {
              ...el,
              url: el.filePath ? el.filePath.replace('/file/maneuver-scenario/','maneuver-scenario-files/') : '',
              name: el.fileName
          }
      })
  },
  methods: {
      handleRemove(file) {
          const item = this.fileList.splice(this.fileList.findIndex(el => el.uid === file.uid), 1)[0]
          if (!item.file) {
              this.removeList.push(item)
          } else {
              this.addList.splice(this.addList.findIndex(el => el.uid === item.uid), 1)
          }
      },
      beforeUpload(file) {
          const item = {
              uid: file.uid,
              name: file.name,
              url: file.url,
              file: file.raw
          }
          this.fileList.push(item)
          this.addList.push(item)
      },
      getList() {
          return {
              addList: this.addList.map(el => el.file),
              removeList: this.removeList.map(el => el.id)
          }
      }
  }
};
</script>

<style>
</style>
